<template>
  <div class="a1-container">
    <div class="header">
      <div class="header-left">
        <h1><el-icon><Document /></el-icon>文献上传</h1>
        <el-tag type="info" effect="plain" class="version-tag">Version 1.0</el-tag>
      </div>
      <div class="user-info">
        <el-badge :value="historyData.length" class="notification-badge">
          <el-icon><Bell /></el-icon>
        </el-badge>
        <span class="welcome">欢迎您 <span class="real-name">{{ realName }}</span></span>
        <el-avatar :size="32" class="user-avatar" @click="handleAvatarClick">
          <el-icon><User /></el-icon>
        </el-avatar>
        
        <span class="username">{{ username }}</span>
        <el-tooltip content="退出登录" placement="bottom">
          <button class="logout-btn" @click="handleLogout">
            <el-icon><SwitchButton /></el-icon> 退出登录
          </button>
        </el-tooltip>
      </div>
    </div>
    
    <div class="stats-cards">
      <div class="processed-count-text">
        <el-icon><CircleCheckFilled /></el-icon> 已通过文档数：{{ stats.pass }}
        <el-divider direction="vertical" />
        <el-icon><Timer /></el-icon> 上传审核：{{ stats.all }}
        <el-divider direction="vertical" />
        <el-icon><DataLine /></el-icon> 通过率：{{ getSuccessRate() }}%
      </div>
    </div>
    
    <div class="history-button-section">
      <el-button-group class="status-buttons">
        <el-button 
          type="warning" 
          :class="{ active: currentStatus === 'uploading', 'upload-status-btn': true }"
          @click="handleStatusChange('uploading')"
        >
          <el-icon><Upload /></el-icon>
          上传
        </el-button>
        <el-divider direction="vertical" />
        <el-button 
          type="info" 
          :class="{ active: currentStatus === 'uploaded' }"
          @click="handleStatusChange('uploaded')"
        >
          已上传文献
        </el-button>
        <el-button 
          type="primary" 
          :class="{ active: currentStatus === 'pending' }"
          @click="handleStatusChange('pending')"
        >
          等待审核
        </el-button>
        <el-button 
          type="success" 
          :class="{ active: currentStatus === 'completed' }"
          @click="handleStatusChange('completed')"
        >
          审核通过
        </el-button>
        <el-button 
          type="danger" 
          :class="{ active: currentStatus === 'failed' }"
          @click="handleStatusChange('failed')"
        >
          审核未通过
        </el-button>
      </el-button-group>
    </div>

    <!-- 上传区域 -->
    <div class="upload-section" v-if="currentStatus === 'uploading'">
      <el-card class="upload-card">
        <template #header>
          <div class="card-header">
            <el-icon><Upload /></el-icon>
            <span>拖拽文件夹或单个PDF文件上传</span>
          </div>
        </template>
        <div class="upload-content">
          <div class="upload-area"
               @dragover.prevent
               @drop.prevent="handleDrop"
               @dragenter.prevent="handleDragEnter"
               @dragleave.prevent="handleDragLeave"
               :class="{ 'drag-over': isDragging }">
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              将文件夹或PDF文件拖到此处，或<em>点击选择文件/文件夹</em>
              <div class="upload-tip">支持单个文件最大 50MB</div>
            </div>
            <input
              type="file"
              ref="fileInput"
              @change="handleFileSelect"
              accept=".pdf"
              multiple
              style="display: none"
            />
            <input
              type="file"
              ref="folderInput"
              @change="handleFolderSelect"
              webkitdirectory
              directory
              multiple
              style="display: none"
            />
            <div class="upload-buttons">
              <el-button type="primary" @click="triggerFileSelect">
                <el-icon><Document /></el-icon> 选择文件
              </el-button>
              <el-button type="primary" @click="triggerFolderSelect">
                <el-icon><Folder /></el-icon> 选择文件夹
              </el-button>
            </div>
          </div>

          <!-- 文件列表 -->
          <div class="file-list" v-if="selectedFiles.length > 0">
            <div class="file-list-header">
              <h3>待上传文件列表</h3>
              <div class="header-actions">
                <el-button 
                  type="primary" 
                  @click="uploadAllFiles" 
                  :loading="isUploadingAll"
                  :disabled="!selectedFiles.length || selectedFiles.every(f => f.uploaded)"
                  class="upload-all-button"
                >
                  <el-icon><Upload /></el-icon> 一键上传全部
                </el-button>
                <el-button type="danger" @click="clearFiles" size="small">
                  <el-icon><Delete /></el-icon> 清空列表
                </el-button>
              </div>
            </div>
            <div class="file-items">
              <div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
                <div class="file-info">
                  <el-icon><Document /></el-icon>
                  <span class="file-name">{{ file.name }}</span>
                </div>
                <div class="file-actions">
                  <el-button 
                    type="primary" 
                    size="small"
                    :loading="file.uploading"
                    :disabled="file.uploading || file.uploaded || file.error"
                    @click="uploadSingleFile(file, index)"
                    class="action-button upload-button"
                  >
                    <el-icon><Upload /></el-icon>
                  </el-button>
                  <el-button 
                    type="danger" 
                    size="small"
                    @click="removeFile(index)"
                    class="action-button delete-button"
                  >
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
                <!-- 显示上传状态 -->
                <el-tag 
                  :type="file.uploading ? 'primary' : file.error ? 'danger' : 'info'"
                  class="file-status"
                >
                  {{ file.uploading ? '上传中' : file.error ? file.error : '待上传' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="results-section" v-if="fileData">
      <el-card class="results-card">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>文件处理结果</span>
            <el-tag size="small" type="success" effect="light" class="status-tag">
              处理完成
            </el-tag>
          </div>
        </template>
        
        <div class="file-data">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="文件ID">
              <el-tag size="small">{{ fileData.id || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件名">
              <el-tag size="small" type="info">{{ fileData.fileName || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件大小">
              <el-tag size="small" type="warning">
                {{ fileData.fileSize ? (fileData.fileSize / 1024).toFixed(2) + ' KB' : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件类型">
              <el-tag size="small" type="success">{{ fileData.fileType || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上传时间">
              <el-tag size="small" type="info">
                {{ fileData.uploadTime ? new Date(fileData.uploadTime).toLocaleString() : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="处理状态">
              <el-tag size="small" type="success">已完成</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

    <!-- 历史记录列表 -->
    <div class="history-list-section" v-if="filteredHistoryData.length > 0 && currentStatus !== 'uploading'">
      <el-card class="history-list-card">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <h2>文本文献列表</h2>
              <el-button type="primary" @click="fetchHistoryData">
                <el-icon><Refresh /></el-icon>
                刷新列表
              </el-button>
            </div>
          </div>
        </template>
        
        <div class="file-list">
          <div 
            v-for="item in paginatedHistoryData" 
            :key="item.id"
            class="file-item"
            :class="{ 'file-item-active': previewItem && previewItem.id === item.id }"
            @click="previewDetail(item)"
          >
            <div class="file-icon">
              <el-icon :size="24" class="file-type-icon"><Document /></el-icon>
            </div>
            <div class="file-name">{{ item.fileName || '-' }}</div>
            <div class="file-actions">
              <el-tooltip content="下载文件" placement="top" :show-after="500">
                <el-button 
                  type="primary" 
                  circle 
                  @click.stop="downloadFile(item.fileData.fileId)"
                  size="small"
                  class="action-button download-button"
                >
                  <el-icon><Download /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip v-if="item.status === 0" content="AI分析和文件不一致请点击" placement="top" :show-after="500">
                <el-button
                  type="warning"
                  circle
                  @click.stop="markDescriptionWrong(item.fileData.id)"
                  size="small"
                  class="action-button mark-button"
                >
                  <el-icon><Warning /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
            <el-tag :type="getStatusTagType(item.status)" class="file-status">
              {{ getStatusText(item.status) }}
            </el-tag>
          </div>
        </div>

        <!-- 分页器 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="50"
            :total="filteredHistoryData.length"
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>

      <!-- 右侧详情预览 -->
      <div class="detail-preview" v-if="previewItem">
        <el-card>
          <template #header>
            <div class="preview-header">
              <h3>详细信息预览</h3>
              <el-tag :type="getStatusTagType(previewItem.status)">
                {{ getStatusText(previewItem.status) }}
              </el-tag>
            </div>
          </template>
          <div class="preview-content">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="文件ID">
                {{ previewItem.fileData?.id || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="文章标题">
                {{ previewItem.fileData?.articleTitle || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                {{ previewItem.fileData?.major || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="作者信息">
                <text-ellipsis 
                  :content="formatContent(previewItem.fileData?.authorInfo)" 
                  :id="`author-${previewItem.id}`"
                />
              </el-descriptions-item>
              <el-descriptions-item label="内容摘要">
                <text-ellipsis 
                  :content="formatContent(previewItem.fileData?.contentSummary)" 
                  :id="`summary-${previewItem.id}`"
                />
              </el-descriptions-item>
              <el-descriptions-item label="研究结论">
                <text-ellipsis 
                  :content="formatContent(previewItem.fileData?.researchConclusion)" 
                  :id="`conclusion-${previewItem.id}`"
                />
              </el-descriptions-item>
              <el-descriptions-item v-if="previewItem.fileData?.reviewComment" label="审核意见">
                <text-ellipsis 
                  :content="formatContent(previewItem.fileData?.reviewComment)" 
                  :id="`review-${previewItem.id}`"
                />
              </el-descriptions-item>
              <el-descriptions-item label="Markdown内容">
                <text-ellipsis 
                  :content="formatContent(previewItem.fileData?.markdown)" 
                  :max-lines="6"
                  :id="`markdown-${previewItem.id}`"
                />
              </el-descriptions-item>
              <el-descriptions-item label="提交时间">
                {{ previewItem.fileData?.createTime ? new Date(previewItem.fileData.createTime).toLocaleString() : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                {{ previewItem.fileData?.updateTime ? new Date(previewItem.fileData.updateTime).toLocaleString() : '-' }}
              </el-descriptions-item>
            </el-descriptions>
            
            <!-- <div class="preview-actions">
              <el-button 
                type="primary"
                @click="downloadFile(previewItem.fileData.fileId)"
              >
                <el-icon><Download /></el-icon> 下载文件
              </el-button>
              <el-button 
                type="danger"
                :disabled="previewItem.status === 'completed'"
                @click="cancelSubmission(previewItem)"
              >
                <el-icon><Delete /></el-icon> 取消审核
              </el-button>
            </div> -->
          </div>
        </el-card>
      </div>
    </div>

    <!-- 无数据提示 -->
    <el-empty 
      v-if="filteredHistoryData.length === 0 && currentStatus !== 'uploading'"
      description="暂无历史记录" 
      class="empty-data"
    />

    <el-dialog
      v-model="showDetailModal"
      title="提交详情"
      width="80%"
      :close-on-click-modal="false"
      class="detail-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <h3><el-icon><Document /></el-icon> 提交详情</h3>
        </div>
      </template>
      
      <div class="dialog-body">
        <el-tabs v-model="activeTab" class="detail-tabs">
          <el-tab-pane label="基本信息" name="basic">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="文件ID">
                {{ selectedDetail?.fileData?.id || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="文件名">
                {{ selectedDetail?.fileName || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                {{ selectedDetail?.fileData?.major || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="getStatusTagType(selectedDetail?.status)">
                  {{ getStatusText(selectedDetail?.status) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="提交时间">
                {{ selectedDetail?.submitTime ? new Date(selectedDetail.submitTime).toLocaleString() : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                {{ selectedDetail?.fileData?.updateTime ? new Date(selectedDetail.fileData.updateTime).toLocaleString() : '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="文章信息" name="article">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="文章标题">
                {{ selectedDetail?.fileData?.articleTitle || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="作者信息">
                {{ selectedDetail?.fileData?.authorInfo || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="内容摘要">
                <div class="content-block">{{ selectedDetail?.fileData?.contentSummary || '-' }}</div>
              </el-descriptions-item>
              <el-descriptions-item label="研究结论">
                <div class="content-block">{{ selectedDetail?.fileData?.researchConclusion || '-' }}</div>
              </el-descriptions-item>
              <el-descriptions-item label="审核意见">
                <div class="content-block">{{ selectedDetail?.fileData?.reviewComment || '-' }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import request from '@/utils/request';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { h } from 'vue'; // 导入h函数用于创建虚拟DOM
import { 
  Document, User, SwitchButton, Files, Upload, UploadFilled, 
  Loading, InfoFilled, Key, Folder, DataLine, Collection, 
  Lock, Timer, Delete, Notebook, Clock, Close, View, 
  CircleCheckFilled, CircleCloseFilled, Warning, Bell, Search,
  Download, Refresh,
  Warning as WarningIcon
} from '@element-plus/icons-vue';
import { ref, reactive, onBeforeUnmount, computed } from 'vue';

// const ip = "http://localhost:8080"
import { baseURL, ip } from '@/config/baseURL';

// 创建TextEllipsis组件
const TextEllipsis = {
  props: {
    content: {
      type: String,
      default: ''
    },
    maxLines: {
      type: Number,
      default: 4
    },
    // 添加唯一标识符，确保每个实例独立
    id: {
      type: [String, Number],
      default: () => Math.random().toString(36).substr(2, 9)
    }
  },
  data() {
    return {
      expanded: false,
      needsExpansion: false,
      maxHeight: 0,
      contentHeight: 0
    };
  },
  mounted() {
    this.checkContentHeight();
    // 添加窗口大小变化监听，以便在窗口调整时重新计算
    window.addEventListener('resize', this.checkContentHeight);
  },
  beforeUnmount() {
    // 在组件销毁前移除事件监听
    window.removeEventListener('resize', this.checkContentHeight);
  },
  watch: {
    // 监听内容变化，重新计算
    content() {
      this.$nextTick(() => {
        this.checkContentHeight();
      });
    }
  },
  methods: {
    checkContentHeight() {
      this.$nextTick(() => {
        const contentElement = this.$refs.content;
        if (contentElement) {
          const lineHeight = 24; // 固定行高为24px
          this.maxHeight = lineHeight * this.maxLines;
          // 保存内容实际高度
          this.contentHeight = contentElement.scrollHeight;
          // 检查内容是否需要展开
          this.needsExpansion = this.contentHeight > this.maxHeight;
          console.log(`ID: ${this.id}, 内容高度: ${this.contentHeight}, 最大高度: ${this.maxHeight}, 需要展开: ${this.needsExpansion}`);
        }
      });
    },
    toggleExpand() {
      this.expanded = !this.expanded;
      console.log(`ID: ${this.id}, 切换展开状态: ${this.expanded}`);
    }
  },
  render() {
    return h('div', { class: 'text-ellipsis-container' }, [
      h('div', {
        ref: 'content',
        class: ['content-block', { 'text-collapsed': !this.expanded && this.needsExpansion }],
        style: !this.expanded && this.needsExpansion 
          ? { maxHeight: `${this.maxHeight}px`, overflow: 'hidden' } 
          : { maxHeight: 'none' }
      }, this.content),
      // 条件渲染收起/展开按钮
      this.needsExpansion ? h('a', {
        class: 'toggle-expand',
        onClick: () => this.toggleExpand()
      }, this.expanded ? '收起' : '展开') : null
    ]);
  }
};

export default {
  name: 'A1Main',
  components: {
    Document, User, SwitchButton, Files, Upload, UploadFilled, 
    Loading, InfoFilled, Key, Folder, DataLine, Collection, 
    Lock, Timer, Delete, Notebook, Clock, Close, View, 
    CircleCheckFilled, CircleCloseFilled, Warning, Bell, Search,
    Download, Refresh,
    TextEllipsis, // 注册组件
    WarningIcon // 新增警告图标组件
  },
  setup() {
    const router = useRouter();
    const selectedFiles = ref([]);
    const historyData = ref([]);
    const stats = ref({ all: 0, pass: 0 });
    const previewItem = ref(null);
    const currentStatus = ref('uploading');
    const currentPage = ref(1);
    const pageSize = ref(50); // 注意：虽然这里初始化为10，但在模板中实际使用的是50
    const isUploadingAll = ref(false);
    const isUploading = ref(false); // Keep this for internal state tracking
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'failed': '处理失败',
        '-3': '已标记,等待AI重新分析', // 新增
        '-2': 'AI分析中',
        '-1': 'AI分析失败',
        '0': 'AI分析完成',
        '1': '专家审核失败',
        '2': '专家审核成功',
        '3': '专家审核成功',
        '5': '专家审核成功',
        '7': '全部通过',
        '8': 'AI分析失败',
        '9': 'AI分析中',
        'uploading': '上传中' // 添加上传中状态
      };
      return statusMap[status] || '未知状态';
    };

    // 获取状态标签类型
    const getStatusTagType = (status) => {
      const typeMap = {
        'pending': 'warning',
        'processing': 'primary',
        'completed': 'success',
        'failed': 'danger',
        '-3': 'warning', // 新增
        '-2': 'primary',
        '-1': 'danger',
        '0': 'success',
        '1': 'danger',
        '2': 'success',
        '3': 'success',
        '5': 'success',
        '7': 'success',
        '8': 'danger',
        '9': 'info',
        'uploading': 'primary' // 添加上传中状态
      };
      return typeMap[status] || 'info';
    };

    // 预览详情
    const previewDetail = (item) => {
      console.log('预览项目:', item);
      
      if (!item || !item.fileData) {
        console.error('fileData缺失:', item);
        ElMessage.warning('文件数据不完整，无法显示详情');
        return;
      }
      
      if (previewItem.value && previewItem.value.id === item.id) {
        console.log('已经选中该项目');
        return;
      }
      
      previewItem.value = JSON.parse(JSON.stringify(item));
      console.log('设置的预览项目:', previewItem.value);
    };

    // 获取历史数据
    const fetchHistoryData = async () => {
      try {
        console.log('开始获取历史数据');
        const response = await axios({
          method: 'get',
          // url: 'http://10.137.10.169:8080/api/me/submitted',
          url: ip + '/api/me/submitted',
          headers: {
            'auth': localStorage.getItem('auth')
          }
        });

        console.log('历史数据响应:', response.data);

        if (response.data && response.data.code === 200) {
          historyData.value = response.data['file-view'].map(item => {
            console.log('处理单个项目:', item);
            
            if (!item || !item.fileId) {
              console.error('项目数据异常:', item);
            }
            
            // 处理文件名，只保留文件名部分
            const fileName = item.articleTitle || `文件${item.fileId}`;
            const cleanFileName = fileName.split('/').pop();
            
            return {
              id: item.id,
              fileName: cleanFileName,
              submitTime: item.createTime,
              status: item.status,
              fileData: item
            };
          });

          // 如果历史数据不为空，默认预览第一项
          if (historyData.value.length > 0) {
            previewDetail(historyData.value[0]);
          }
        } else {
          throw new Error(response.data?.msg || '获取历史记录失败');
        }
      } catch (error) {
        console.error('获取历史记录失败:', error);
        ElMessage.error('获取历史记录失败');
      }
    };

    // 计算过滤后的历史数据
    const filteredHistoryData = computed(() => {
      let filtered = historyData.value;
      
      // 默认显示所有记录，但通过状态过滤
        filtered = filtered.filter(item => {
        switch (currentStatus.value) {
          case 'completed':
            return item.status === 2  || item.status === 7;
          case 'failed':
            return item.status === 1 || item.status === 8;
          case 'uploading':
            return item.status === -2 || item.status === 9;
          case 'uploaded':
            return true;
          case 'pending':
            return item.status === 0;
          default:
            return true; // 如果没有选择任何状态，显示所有记录
        }
      });
      
      return filtered;
    });

    // 计算分页后的历史数据
    const paginatedHistoryData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredHistoryData.value.slice(start, end);
    });

    // 处理状态变化
    const handleStatusChange = (status) => {
      currentStatus.value = status;
      currentPage.value = 1;
    };

    // 处理页码变化
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    // 处理每页数量变化
    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1;
    };

    // 获取统计数据
    const fetchStats = async () => {
      try {
        const response = await axios({
          method: 'get',
          // url: 'http://10.137.10.169:8080/api/Static',
          url: ip + '/api/Static',
          headers: {
            'auth': localStorage.getItem('auth')
          }
        });
        console.log('auth:', localStorage.getItem('auth'));
        if (response.data && response.data.code === 200) {
          console.log('统计数据:', response.data.fileCount);
          stats.value = response.data.fileCount || { all: 0, pass: 0 };
        } else {
          console.error('获取统计数据失败:', response.data);
          stats.value = { all: 0, pass: 0 };
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        ElMessage.error('获取统计数据失败');
        stats.value = { all: 0, pass: 0 };
      }
    };

    // 上传单个文件
    const uploadSingleFile = async (file, index) => {
      if (file.uploading || file.uploaded) return;

      selectedFiles.value[index].uploading = true;
      
      try {
        const formData = new FormData();
        // 创建一个新的File对象，只使用文件名
        const cleanFileName = file.raw.name.split('/').pop();
        const newFile = new File([file.raw], cleanFileName, { type: file.raw.type });
        formData.append('file', newFile);
        
        console.log('开始上传文件:', cleanFileName);

        const response = await axios({
          method: 'post',
          url: ip + '/api/file/upload',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            'auth': localStorage.getItem('auth')
          }
        });
        
        console.log('上传响应:', response);
        
        if (response.data && response.data.code === 200) {
          // 上传成功后从列表中移除该文件
          selectedFiles.value.splice(index, 1);
          ElMessage.success(`文件 ${cleanFileName} 上传成功`);
          
          // 刷新历史记录和统计数据
          await Promise.all([
            fetchHistoryData(),
            fetchStats()
          ]);
        } else {
          throw new Error(response.data?.msg || '请求失败');
        }
      } catch (error) {
        console.error('文件上传失败:', error);
        // 重置文件状态，允许重新上传
        selectedFiles.value[index].uploading = false;
        
        // 检查错误信息是否包含 IOException
        if (error.message && error.message.includes('java.io.IOException')) {
          selectedFiles.value[index].error = '文件过大，请更换文件上传';
        } else {
          selectedFiles.value[index].error = `上传失败: ${error.message}`;
        }
      }
    };

    // 处理文件列表
    const processFiles = (files) => {
      const pdfFiles = files.filter(file => 
        file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')
      );

      // 添加文件大小限制检查
      const maxFileSize = 50 * 1024 * 1024; // 50MB in bytes
      const validFiles = pdfFiles.filter(file => {
        if (file.size > maxFileSize) {
          ElMessage.warning(`文件 ${file.name} 超过50MB限制，已自动过滤`);
          return false;
        }
        return true;
      });

      const newFiles = validFiles.filter(file => 
        !selectedFiles.value.some(existingFile => 
          existingFile.name === file.name.split('/').pop()
        )
      );

      if (newFiles.length > 0) {
        selectedFiles.value.push(...newFiles.map(file => ({
          name: file.name.split('/').pop(), // 只保留文件名，不包含路径
          raw: file,
          uploading: false,
          uploaded: false,
          error: null,
          status: 'pending'
        })));
        ElMessage.success(`已添加 ${newFiles.length} 个PDF文件`);
      } else {
        ElMessage.warning('没有找到新的有效PDF文件');
      }
    };

    // 初始化数据
    fetchHistoryData();
    fetchStats();

    // 添加批量上传方法
    const uploadAllFiles = async () => {
      if (!selectedFiles.value.length) {
        ElMessage.warning('没有待上传的文件');
        return;
      }

      if (selectedFiles.value.every(f => f.uploaded)) {
        ElMessage.info('所有文件已上传完成');
        return;
      }

      isUploadingAll.value = true;

      try {
        // 创建一个上传队列
        const uploadQueue = selectedFiles.value
          .map((file, index) => ({ file, index }))
          .filter(({ file }) => !file.uploaded && !file.uploading);

        // 使用 Promise.all 并行上传所有文件
        await Promise.all(
          uploadQueue.map(({ file, index }) => uploadSingleFile(file, index))
        );

        ElMessage.success('所有文件上传完成');
      } catch (error) {
        console.error('批量上传过程中出现错误:', error);
        // 重置所有未上传成功的文件状态
        selectedFiles.value.forEach(file => {
          if (!file.uploaded) {
            file.uploading = false;
          }
        });
        ElMessage.error('部分文件上传失败，请重试');
      } finally {
        isUploadingAll.value = false;
      }
    };

    // 新增标记有误方法
    const markDescriptionWrong = async (pdfId) => {
      if (!pdfId) {
        ElMessage.error('文件ID无效，无法标记');
        return;
      }
      try {
        const response = await axios({
          method: 'post',
          url: ip + `/api/description/wrong/${pdfId}`,
          headers: {
            'auth': localStorage.getItem('auth')
          }
        });
        console.log('传给后端的id:', pdfId);
        if (response.data && response.data.code === 200) {
          ElMessage.success('标记成功');
          await fetchHistoryData(); // 标记成功后刷新文本文献列表
          // 刷新右侧详细信息
          if (previewItem.value && previewItem.value.fileData && (previewItem.value.fileData.id === pdfId || previewItem.value.id === pdfId)) {
            // 在最新的historyData中查找对应项并更新previewItem
            const updated = historyData.value.find(item => item.fileData && (item.fileData.id === pdfId || item.id === pdfId));
            if (updated) {
              previewItem.value = JSON.parse(JSON.stringify(updated));
            }
          }
        } else {
          throw new Error(response.data?.msg || '标记失败');
        }
      } catch (error) {
        ElMessage.error(error.message || '标记失败');
      }
    };

    return {
      router,
      selectedFiles,  // 确保这里暴露了 selectedFiles
      historyData,
      stats,
      previewItem,
      currentStatus,
      currentPage,
      pageSize,
      filteredHistoryData,
      paginatedHistoryData,
      uploadSingleFile,
      processFiles,
      fetchHistoryData,
      fetchStats,
      getStatusText,
      getStatusTagType,
      previewDetail,
      handleStatusChange,
      handleCurrentChange,
      handleSizeChange,
      isUploadingAll,
      uploadAllFiles,
      isUploading, // 暴露全局上传状态
      markDescriptionWrong,
    };
  },
  data() {
    return {
      username: '',
      realName: '',  // 添加realName字段
      loading: false,
      fileData: null,
      error: null,
      showDetailModal: false,
      selectedDetail: null,
      showHistoryDrawer: false,
      cancelLoading: false,
      searchQuery: '',
      activeTab: 'basic',
    };
  },
  mounted() {
    // 从localStorage获取用户名
    this.username = localStorage.getItem('username') || '用户';
    // 获取用户信息
    this.fetchUserInfo();
  },
  methods: {
    // 添加获取用户信息的方法
    async fetchUserInfo() {
      try {
        const response = await axios({
          method: 'get',
          url: ip + '/api/me',
          headers: {
            'auth': localStorage.getItem('auth')
          }
        });
        
        if (response.data && response.data.code === 200) {
          this.realName = response.data.data.realName || '用户';
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    selectFile(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFiles() {
      if (!this.selectedFiles.length) {
        ElMessage.warning('请选择要上传的文件');
        return;
      }

      this.loading = true;
      this.error = null;
      
      try {
        // 逐个上传文件
        for (const file of this.selectedFiles) {
          const formData = new FormData();
          formData.append('file', file);
          
          const response = await request({
            method: 'post',
            // url: 'http://localhost:8080/api/file/upload',
            url: ip + '/api/file/upload',
            data: formData,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          
          if (response.data && response.data.code === 200) {
            const confId = response.data.data.id;
            this.startPolling(confId);
            ElMessage.success(`文件 ${file.name} 上传成功`);
          } else {
            throw new Error(response.data?.msg || '请求失败');
          }
        }
        
        // 清空已选择的文件
        this.selectedFiles = [];
        
        // 刷新历史记录和统计数据
        await Promise.all([
          this.fetchHistoryData(),
          this.fetchStats()
        ]);
        
      } catch (error) {
        console.error('文件处理失败:', error);
        this.error = error.message || '文件处理失败，请重试';
        ElMessage.error(error.message || '文件处理失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    // 开始轮询状态
    startPolling(confId) {
      const pollInterval = setInterval(async () => {
        try {
          const response = await request({
            method: 'get',
            // url: `http://10.137.10.169:8080/api/file/info/conf/${confId}`
            url: ip + `/api/file/info/conf/${confId}`
          });
          console.log("轮询了一次");
          if (response.data && response.data.code === 200) {
            const status = response.data.data.status;
            
            if (status === 8) {
              clearInterval(pollInterval);
              ElMessage.error('文件处理失败');
            } else if (status === 0) {
              clearInterval(pollInterval);
              ElMessage.success('大模型处理成功');
            }
          }
        } catch (error) {
          console.error('轮询状态失败:', error);
          clearInterval(pollInterval);
        }
      }, 3000); // 每3秒轮询一次

      // 存储interval ID，以便在组件销毁时清除
      this.pollIntervalId = pollInterval;
    },
    // 组件销毁时清除轮询
    beforeDestroy() {
      if (this.pollIntervalId) {
        clearInterval(this.pollIntervalId);
      }
    },
    handleLogout() {
      // 清除登录状态
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('username');
      localStorage.removeItem('userRole');
      localStorage.removeItem('token'); // 同时清除token
      
      // 跳转到登录页
      this.router.push('/login');
    },
    // 查看详情
    async viewDetail(item) {
      this.selectedDetail = item;
      this.showDetailModal = true;
      
      // 如果没有完整的文件数据，尝试从后端获取
      if (!item.fileData && item.id) {
        try {
          const response = await request({
            method: 'get',
            url: `/api/file/detail/${item.id}`
          });
          
          if (response.data && response.data.code === 200) {
            // 将获取的文件数据添加到选中项中
            this.selectedDetail.fileData = response.data.data;
          }
        } catch (error) {
          console.error('获取文件详情失败:', error);
          ElMessage.error('获取文件详情失败');
        }
      }
    },
    // 格式化字段名称
    formatFieldName(key) {
      const fieldMap = {
        'id': '文件ID',
        'fileName': '文件名',
        'filePath': '文件路径',
        'fileSize': '文件大小',
        'fileType': '文件类型',
        'type': '类型',
        'fileHash': '文件哈希',
        'uploadTime': '上传时间',
        'uploadUserId': '上传用户ID',
        'isDeleted': '是否删除',
        'deleteTime': '删除时间',
        'description': '描述'
      };
      return fieldMap[key] || key;
    },
    
    // 格式化字段值
    formatFieldValue(key, value) {
      if (value === null || value === undefined) return '-';
      
      if (key === 'fileSize') {
        return (value / 1024).toFixed(2) + ' KB';
      } else if (key === 'uploadTime' || key === 'deleteTime') {
        return value ? new Date(value).toLocaleString() : '-';
      } else if (key === 'isDeleted') {
        return value === 0 ? '否' : '是';
      }
      return value;
    },
    // 取消审核
    async cancelSubmission(item) {
      if (!confirm('确定要取消该审核吗？')) {
        return;
      }

      this.cancelLoading = true;
      try {
        const response = await request({
          method: 'post',
          // url: `http://10.137.10.169:8080/api/cancel/${item.id}`
          url: ip + `/api/cancel/${item.id}`
        });
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('取消成功');
          await this.fetchHistoryData(); // 重新获取历史数据
        } else {
          throw new Error(response.data?.msg || '取消失败');
        }
      } catch (error) {
        console.error('取消审核失败:', error);
        ElMessage.error('取消审核失败，请重试');
      } finally {
        this.cancelLoading = false;
      }
    },
    // 计算成功率
    getSuccessRate() {
      if (this.stats.all === 0) return 0;
      return Math.round((this.stats.pass / this.stats.all) * 100);
    },
    handleFileChange(file) {
      if (file.raw) {
        // 检查文件类型
        if (file.raw.type === 'application/pdf') {
          // 检查是否已存在相同文件
          const isDuplicate = this.selectedFiles.some(
            f => f.name === file.raw.name && f.size === file.raw.size
          );
          
          if (!isDuplicate) {
            this.selectedFiles.push({
              ...file.raw,
              uploading: false,
              uploaded: false
            });
            ElMessage.success(`已添加文件: ${file.raw.name}`);
          } else {
            ElMessage.warning(`文件 ${file.raw.name} 已存在`);
          }
        } else {
          ElMessage.warning(`文件 ${file.raw.name} 不是PDF格式`);
        }
      }
    },
    handleStatusChange(status) {
      this.currentStatus = status;
      this.currentPage = 1; // 切换状态时重置页码
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 预览详情
    previewDetail(item) {
      console.log('预览项目:', item);
      
      // 确保数据结构完整
      if (!item || !item.fileData) {
        console.error('fileData缺失:', item);
        ElMessage.warning('文件数据不完整，无法显示详情');
        return;
      }
      
      // 如果点击当前已选中的项目，不做任何操作
      if (this.previewItem && this.previewItem.id === item.id) {
        console.log('已经选中该项目');
        return;
      }
      
      this.previewItem = JSON.parse(JSON.stringify(item)); // 深拷贝避免引用问题
      console.log('设置的预览项目:', this.previewItem);
      
      // 滚动详情区域到顶部
      this.$nextTick(() => {
        const detailElement = document.querySelector('.detail-preview');
        if (detailElement) {
          detailElement.scrollTop = 0;
        }
      });
    },
    
    // 格式化内容，处理换行
    formatContent(content) {
      if (!content) return '-';
      // 处理字符串中的\n，将其转换为实际换行
      return content.replace(/\\n/g, '\n');
    },
    
    // 下载文件
    async downloadFile(fileId) {
      try {
        // 检查fileId是否有效
        if (!fileId) {
          console.error('无效的文件ID:', fileId);
          ElMessage.error('文件ID无效，无法下载');
          return;
        }
        
        console.log('下载文件ID:', fileId);
        
        // 创建下载链接
        // const downloadUrl = `http://10.137.10.169:8080/api/file/download/${fileId}`;
        const downloadUrl = ip + `/api/file/download/${fileId}`;
        console.log('下载URL:', downloadUrl);
        
        // 使用浏览器下载功能
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', ''); // 自动使用服务器提供的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        ElMessage.success('文件下载已开始');
      } catch (error) {
        console.error('文件下载失败:', error);
        ElMessage.error('文件下载失败，请重试');
      }
    },
    // 格式化文件大小
    formatFileSize(size) {
      if (size < 1024) {
        return size + ' B';
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + ' KB';
      } else {
        return (size / (1024 * 1024)).toFixed(2) + ' MB';
      }
    },
    // 移除单个文件
    removeFile(index) {
      this.selectedFiles.splice(index, 1);
    },
    // 清空文件列表
    clearFiles() {
      this.selectedFiles = [];
    },
    // 触发文件夹选择
    triggerFolderSelect() {
      this.$refs.folderInput.click();
    },
    // 触发单个文件选择
    triggerFileSelect() {
      this.$refs.fileInput.click();
    },
    // 处理文件夹选择
    handleFolderSelect(event) {
      const files = Array.from(event.target.files);
      this.processFiles(files);
      // 清空input，允许重复选择同一文件夹
      event.target.value = '';
    },
    // 处理单个文件选择
    handleFileSelect(event) {
      const files = Array.from(event.target.files);
      if (files.length > 0) {
        // 过滤出PDF文件
        const pdfFiles = files.filter(file => 
          file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')
        );

        // 过滤掉已存在的文件
        const newFiles = pdfFiles.filter(file => 
          !this.selectedFiles.some(existingFile => 
            existingFile.name === file.name.split('/').pop()
          )
        );

        if (newFiles.length > 0) {
          this.selectedFiles.push(...newFiles.map(file => ({
            name: file.name.split('/').pop(), // 只保留文件名，不包含路径
            raw: file,
            uploading: false,
            uploaded: false
          })));
          ElMessage.success(`已添加 ${newFiles.length} 个PDF文件`);
        } else {
          ElMessage.warning('没有找到新的PDF文件或文件已存在');
        }
      }
      // 清空input，允许重复选择同一文件
      event.target.value = '';
    },
    // 处理拖拽进入
    handleDragEnter() {
      this.isDragging = true;
    },

    // 处理拖拽离开
    handleDragLeave() {
      this.isDragging = false;
    },

    // 处理文件拖放
    handleDrop(event) {
      this.isDragging = false;
      const items = event.dataTransfer.items;
      const files = [];
      
      // 递归处理文件夹
      const processEntry = async (entry) => {
        if (entry.isFile) {
          const file = await new Promise(resolve => entry.file(resolve));
          if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
            files.push(file);
          }
        } else if (entry.isDirectory) {
          const reader = entry.createReader();
          const entries = await new Promise(resolve => {
            reader.readEntries(resolve);
          });
          for (const entry of entries) {
            await processEntry(entry);
          }
        }
      };

      // 处理所有拖放的项目
      const processItems = async () => {
        for (const item of items) {
          const entry = item.webkitGetAsEntry();
          if (entry) {
            await processEntry(entry);
          }
        }
        this.processFiles(files);
      };

      processItems();
    },
    handleAvatarClick() {
      this.router.push({
        path: '/update-pass',
        query: {
          username: this.username
        }
      })
    },
  }
};
</script>

<style>
/* 全局样式覆盖 */
.main-content, .app-container {
  max-width: none !important;
  width: 100% !important;
}

.file-data, .content, table {
  max-width: none !important;
  width: 100% !important;
}

/* 添加到A1Main.vue中的全局样式 */
html, body {
  overflow-x: hidden;
  min-width: 1200px; /* 设置一个最小宽度 */
}

/* 固定布局样式 */
.app-container, .main-content {
  width: 100% !important;
  min-width: 1200px !important; /* 固定最小宽度 */
  position: relative;
}

/* 确保所有容器都遵循相同的固定宽度规则 */
.a1-container, .a2-container, .a3-container, 
.file-data, .content, .upload-section, .results-section {
  min-width: 1200px !important;
}

/* 防止表格被挤压 */
table {
  table-layout: fixed; /* 固定表格布局 */
  min-width: 1000px !important;
}
</style>

<style scoped>
/* 组件范围样式 */
.a1-container {
  width: 100%;
  min-width: 1200px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.header h1 {
  color: #2c3e50;
  font-size: 24px;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome {
  font-size: 16px;
  color: #606266;
}

.real-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 4px;
}

.username {
  font-size: 16px;
  color: #409EFF;
  font-weight: 600;
  margin: 0 10px;
}

.logout-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.logout-btn:hover {
  background-color: #e64242;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.processed-count-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #606266;
  margin: 20px 0;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.processed-count-text .el-icon {
  color: #409EFF;
}

.processed-count-text .el-divider {
  margin: 0 12px;
  height: 1em;
}

.upload-section {
  margin-bottom: 30px;
  padding: 25px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.upload-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67c23a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upload-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.upload-section:hover::before {
  opacity: 1;
}

.upload-card {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.upload-card :deep(.el-card__header) {
  padding: 0 0 20px 0;
  border-bottom: 2px solid #f0f2f5;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.card-header .el-icon {
  font-size: 24px;
  color: #409EFF;
  background: linear-gradient(135deg, #409EFF, #66b1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.upload-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.upload-area {
  width: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #dcdfe6;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  padding: 30px;
}

.upload-area:hover {
  border-color: #409EFF;
  background: linear-gradient(145deg, #ffffff, #f5f7fa);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.1);
}

.upload-area.drag-over {
  border-color: #409EFF;
  background: linear-gradient(145deg, #ecf5ff, #f5f7fa);
  transform: scale(1.02);
  box-shadow: 0 12px 24px rgba(64, 158, 255, 0.15);
}

.upload-area .el-icon--upload {
  font-size: 56px;
  color: #409EFF;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.upload-area:hover .el-icon--upload {
  transform: scale(1.1);
  opacity: 1;
}

.upload-area .el-upload__text {
  color: #606266;
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.6;
}

.upload-area .el-upload__text em {
  color: #409EFF;
  font-style: normal;
  font-weight: 600;
  padding: 0 4px;
  position: relative;
}

.upload-area .el-upload__text em::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, #66b1ff);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.upload-area:hover .el-upload__text em::after {
  opacity: 1;
}

.upload-buttons {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.upload-buttons .el-button {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

.upload-buttons .el-button .el-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.upload-buttons .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.2);
}

.upload-buttons .el-button:hover .el-icon {
  transform: scale(1.1);
}

.file-list {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(145deg, #f5f7fa, #ffffff);
  border-bottom: 1px solid #ebeef5;
}

.file-list-header h3 {
  margin: 0;
  font-size: 16px;
  color: #2c3e50;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-list-header .el-button {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.file-items {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;
  position: relative;
  min-height: 60px;
  flex-wrap: nowrap;
}

.file-item:hover {
  background: #f5f7fa;
  transform: translateX(4px);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 40%; /* 限制文件名区域的最大宽度 */
}

.file-info .el-icon {
  font-size: 20px;
  color: #409EFF;
  background: linear-gradient(135deg, #409EFF, #66b1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.file-name {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin: 0 10px;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.file-item:hover .file-actions {
  opacity: 1;
  transform: translateX(0);
}

.file-actions .el-button {
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.file-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

/* 添加文件上传动画 */
@keyframes uploadProgress {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.file-item.uploading {
  position: relative;
  overflow: hidden;
}

.file-item.uploading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #409EFF, #66b1ff, #409EFF);
  background-size: 200% 100%;
  animation: uploadProgress 2s linear infinite;
}

/* 添加拖拽提示动画 */
@keyframes dragHint {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.upload-area::before {
  content: '拖拽文件到这里';
  position: absolute;
  bottom: 20px;
  font-size: 14px;
  color: #909399;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: dragHint 2s ease-in-out infinite;
}

.upload-area:hover::before {
  opacity: 1;
}

/* 优化滚动条样式 */
.file-items::-webkit-scrollbar {
  width: 6px;
}

.file-items::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.file-items::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.file-items::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

/* 添加响应式支持 */
@media (max-width: 768px) {
  .upload-section {
    padding: 20px;
  }

  .upload-area {
    min-height: 200px;
    padding: 20px;
  }

  .upload-buttons {
    flex-direction: column;
    width: 100%;
  }

  .upload-buttons .el-button {
    width: 100%;
  }

  .file-list-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

.results-section {
  padding: 25px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
}

.results-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
}

/* 表格样式优化 */
.file-data {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

table th,
table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

table th:first-child,
table td:first-child {
  width: 20%;
  min-width: 150px;
  font-weight: 600;
}

table th:last-child,
table td:last-child {
  width: 80%;
}

table tr:hover {
  background-color: #f5f7fa;
}

/* 历史按钮样式 */
.history-button-section {
  margin: 20px 0;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: flex-start; /* 修改为靠左对齐 */
  position: relative;
  transition: all 0.3s ease;
}

.history-button-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.status-buttons {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: #f5f7fa;
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
  margin-left: 0; /* 确保没有左边距 */
  margin-right: auto; /* 确保靠左对齐 */
}

.status-buttons .el-button {
  position: relative;
  padding: 10px 20px;
  font-weight: 500;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px !important;
  margin: 0 !important;
}

.status-buttons .el-button:not(.active) {
  background: transparent !important;
  color: #606266 !important;
}

.status-buttons .el-button:not(.active):hover {
  background: rgba(64, 158, 255, 0.1) !important;
  color: #409EFF !important;
  transform: translateY(-1px);
}

.status-buttons .el-button.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* 为每个按钮类型添加特定的悬停效果 */
.status-buttons .el-button--success:not(.active):hover {
  background: rgba(103, 194, 58, 0.1) !important;
  color: #67c23a !important;
}

.status-buttons .el-button--warning:not(.active):hover {
  background: rgba(230, 162, 60, 0.1) !important;
  color: #e6a23c !important;
}

.status-buttons .el-button--info:not(.active):hover {
  background: rgba(144, 147, 153, 0.1) !important;
  color: #909399 !important;
}

.status-buttons .el-button--danger:not(.active):hover {
  background: rgba(245, 108, 108, 0.1) !important;
  color: #f56c6c !important;
}

/* 添加按钮点击效果 */
.status-buttons .el-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 添加按钮内部图标样式 */
.status-buttons .el-button .el-icon {
  font-size: 16px;
  margin-right: 4px;
  transition: transform 0.3s ease;
}

.status-buttons .el-button:hover .el-icon {
  transform: scale(1.1);
}

/* 添加按钮组背景动画效果 */
.status-buttons::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(64, 158, 255, 0.05), rgba(103, 194, 58, 0.05));
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.status-buttons:hover::before {
  opacity: 1;
}

/* 添加响应式支持 */
@media (max-width: 1200px) {
  .status-buttons {
    flex-wrap: wrap;
    justify-content: flex-start; /* 修改为靠左对齐 */
  }
  
  .status-buttons .el-button {
    min-width: 90px;
    padding: 8px 16px;
  }
}

@media (max-width: 768px) {
  .history-button-section {
    padding: 12px;
    justify-content: flex-start; /* 修改为靠左对齐 */
  }
  
  .status-buttons {
    gap: 6px;
    justify-content: flex-start; /* 修改为靠左对齐 */
  }
  
  .status-buttons .el-button {
    min-width: 80px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* 抽屉样式 */
.drawer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.drawer-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
}

.drawer-header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 20px;
}

.drawer-body {
  padding: 20px;
  height: calc(100% - 71px);
  overflow-y: auto;
}

/* 历史记录项样式 */
.history-item {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  background-color: white;
}

.history-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.history-item-content {
  padding: 20px;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.file-name {
  font-weight: 600;
  font-size: 16px;
  color: #2c3e50;
}

.status-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.status-tag.pending {
  background-color: #e6a23c;
  color: white;
}

.status-tag.processing {
  background-color: #409EFF;
  color: white;
}

.status-tag.completed {
  background-color: #67c23a;
  color: white;
}

.status-tag.failed {
  background-color: #f56c6c;
  color: white;
}

.history-item-info {
  color: #909399;
  font-size: 14px;
  margin-bottom: 12px;
}

.history-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.detail-btn {
  background-color: #409EFF;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.detail-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.delete-btn {
  background-color: #F56C6C;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background-color: #f78989;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.delete-btn:disabled {
  background-color: #fab6b6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 详情弹窗样式 */
.detail-dialog {
  max-width: 90vw;
}

.dialog-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}

/* 调整描述列表和内容块的样式 */
.el-descriptions {
  width: 1px;
  margin-bottom: 20px;
  table-layout: fixed;
  box-sizing: border-box;
}

.el-descriptions__body {
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.el-descriptions__table {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}

.el-descriptions__cell {
  padding: 12px 15px;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

.el-descriptions__label {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  color: #333;
  background-color: #f5f7fa;
  padding: 8px 12px !important;
  box-sizing: border-box;
}

.el-descriptions__content {
  width: 1px;
  padding: 12px 15px;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
  min-height: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 内容块样式 */
.el-descriptions__content .content-wrapper {
  width: 300px !important;
  max-width: 300px !important;
  display: block !important;
}

.el-descriptions__content .content-wrapper .content-block {
  width: 300px !important;
  max-width: 300px !important;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin: 5px 0;
  box-sizing: border-box;
  font-size: 14px;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
  display: block !important;
}

/* 调整描述列表内容的宽度 */
:deep(.el-descriptions__content) {
  width: 300px !important;
  max-width: 300px !important;
  padding: 12px 15px;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
  min-height: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: block !important;
}

.detail-tabs {
  margin-top: 20px;
}

.el-tab-pane {
  padding: 20px 0;
}

/* 新增样式 */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.version-tag {
  font-size: 12px;
}

.notification-badge {
  margin-right: 16px;
}

.user-avatar {
  background-color: #409EFF;
  color: white;
}

.stats-cards {
  margin: 20px 0;
}

.processed-count-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #606266;
  margin: 20px 0;
  padding: 12px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.processed-count-text .el-icon {
  color: #409EFF;
}

.processed-count-text .el-divider {
  margin: 0 12px;
  height: 1em;
}

.upload-card {
  margin-bottom: 30px;
}

.upload-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.upload-area {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  padding: 20px;
}

.upload-area:hover {
  border-color: #409EFF;
}

.upload-area.drag-over {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.upload-area .el-icon--upload {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-area .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
  margin-bottom: 16px;
}

.upload-area .el-upload__text em {
  color: #409EFF;
  font-style: normal;
}

.upload-area .el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.upload-actions {
  margin-top: 20px;
  text-align: center;
}

.results-card {
  margin-bottom: 30px;
}

.search-input {
  margin-bottom: 20px;
}

.history-badge {
  margin-left: 8px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .header {
    flex-direction: column;
    gap: 16px;
  }
  
  .user-info {
    width: 100%;
    justify-content: center;
  }
}

/* 动画效果 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 加载动画 */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 状态标签样式 */
.status-tag {
  margin-left: 8px;
}

/* 时间线样式 */
.el-timeline-item__node {
  background-color: #409EFF;
}

.el-timeline-item__tail {
  border-left: 2px solid #e4e7ed;
}

/* 描述列表样式 */
.el-descriptions {
  margin: 16px 0;
}

.el-descriptions__label {
  font-weight: 600;
}

/* 标签样式 */
.el-tag {
  margin-right: 8px;
}

/* 按钮组样式 */
.el-button-group {
  display: flex;
  gap: 8px;
}

/* 抽屉样式优化 */
.el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.el-drawer__body {
  padding: 20px;
}

/* 对话框样式优化 */
.el-dialog__header {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.el-dialog__body {
  padding: 20px;
}

/* 上传区域样式 */
.el-upload-dragger {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.el-upload-dragger:hover {
  border-color: #409EFF;
  background-color: #f5f7fa;
}

.el-upload__tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

/* 进度条样式 */
.el-progress-bar__outer {
  border-radius: 4px;
}

.el-progress-bar__inner {
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* 时间线项目样式 */
.el-timeline-item__content {
  margin-left: 16px;
}

.el-timeline-item__timestamp {
  color: #909399;
  font-size: 12px;
}

/* 卡片内容样式 */
.el-card__body {
  padding: 20px;
}

/* 标签页样式 */
.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.el-tabs__item {
  transition: all 0.3s ease;
}

.el-tabs__item.is-active {
  color: #409EFF;
  font-weight: 600;
}

/* 输入框样式 */
.el-input__inner {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 徽章样式 */
.el-badge__content {
  background-color: #409EFF;
  border: none;
}

/* 头像样式 */
.el-avatar {
  background-color: #409EFF;
  color: white;
  font-size: 16px;
}

/* 按钮样式增强 */
.el-button {
  border-radius: 4px;
  font-weight: 500;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}

/* 表格样式增强 */
.el-table {
  border-radius: 4px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

/* 抽屉内容样式 */
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 历史记录项样式增强 */
.history-item {
  margin-bottom: 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-item-content {
  padding: 12px;
}

.history-item-info {
  margin-bottom: 12px;
}

.history-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 响应式布局增强 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .el-descriptions {
    column-count: 1;
  }
  
  .history-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .history-item-actions {
    flex-direction: column;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .el-card {
    background-color: #1a1a1a;
    border-color: #333;
  }
  
  .el-drawer {
    background-color: #1a1a1a;
  }
  
  .el-dialog {
    background-color: #1a1a1a;
  }
  
  .el-table {
    background-color: #1a1a1a;
    color: #fff;
  }
  
  .el-table th {
    background-color: #2c2c2c;
  }
  
  .el-table td {
    border-bottom-color: #333;
  }
}

.pagination-container {
  margin-top: 20px;
  padding: 10px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
}

.drawer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.el-timeline {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

/* 自定义滚动条样式 */
.drawer-body::-webkit-scrollbar {
  width: 6px;
}

.drawer-body::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.drawer-body::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

.history-list-section {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  min-width: 1200px;
}

.history-list-card {
  flex: 1;
  max-width: 60%; /* 修改为60% */
  min-width: 500px; /* 保持最小宽度 */
  margin-bottom: 30px;
  flex-shrink: 0;
  overflow-x: hidden;
}

.search-box {
  margin-bottom: 20px;
  padding: 0 20px;
}

.file-list {
  padding: 0 10px;
  height: calc(8 * 60px);
  overflow-y: auto;
  /* 添加 overflow-x: hidden 防止水平滚动 */
  overflow-x: hidden;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fff;
  /* 添加 width: 100% 确保宽度填充父容器 */
  width: 100%;
  box-sizing: border-box;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  gap: 10px;
  height: 60px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.file-item:hover {
  background-color: #ecf5ff;
}

.file-item-active {
  background-color: #e6f2ff !important;
  border-left: 4px solid #409EFF;
  padding-left: 11px;
}

.file-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ecf5ff 0%, #e6f2ff 100%);
  border-radius: 8px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.file-type-icon {
  color: #409EFF;
  transition: all 0.3s ease;
}

.file-item:hover .file-icon {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  transform: scale(1.05);
}

.file-item:hover .file-type-icon {
  color: #ffffff;
}

.file-item-active .file-icon {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
}

.file-item-active .file-type-icon {
  color: #ffffff;
}

.file-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px; /* 增加右边距 */
  max-width: 60%; /* 设置最大宽度为容器的60% */
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-right: 15px; /* 增加右边距 */
  flex-shrink: 0;
  flex-wrap: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(10px);
}

.file-item:hover .file-actions {
  opacity: 1;
  transform: translateX(0);
}

.file-status {
  position: static;
  flex-shrink: 0;
  min-width: 90px;
  max-width: 120px; /* 限制状态标签最大宽度 */
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
  opacity: 1;
  transform: none;
}

/* 移除文件项悬停时的状态标签显示效果 */
.file-item:hover .file-status {
  opacity: 1;
  transform: none;
}

/* 添加文件项悬停时的过渡效果 */
.file-item {
  position: relative;
}

.file-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent; /* 移除渐变背景 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.file-item:hover::after {
  opacity: 0; /* 保持透明 */
}

/* 优化按钮和状态标签的显示动画 */
.file-actions .el-button,
.file-status {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.file-item:hover .file-actions .el-button {
  transform: translateY(0);
  opacity: 1;
}

.file-item:hover .file-status {
  transform: translateY(0);
  opacity: 1;
}

.detail-preview {
  flex: 1;
  max-width: 40%; /* 修改为40% */
  min-width: 500px; /* 保持最小宽度 */
  height: fit-content;
  max-height: 80vh;
  overflow-y: auto;
  flex-shrink: 0;
  padding-right: 10px;
  box-sizing: border-box;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header h3 {
  margin: 0;
  font-size: 18px;
}

.preview-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
}

.preview-content .el-descriptions {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.preview-content .el-descriptions__content {
  padding: 12px 15px;
  width: calc(100% - 100px);
  box-sizing: border-box;
}

.preview-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.empty-data {
  margin: 40px 0;
  padding: 40px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 添加一些提示，让用户知道需要点击查看详情 */
.history-list-section:not(:has(.detail-preview))::after {
  content: "← 点击查看详情";
  position: absolute;
  right: 20%;
  top: 50%;
  color: #909399;
  font-size: 16px;
}

/* 添加响应式支持 */
@media (max-width: 1200px) {
  .history-list-section {
    flex-direction: row; /* 保持水平布局 */
    overflow-x: auto; /* 允许水平滚动 */
  }
  
  .history-list-card,
  .detail-preview {
    min-width: 500px; /* 保持最小宽度一致 */
    max-width: 60%; /* 保持6:4比例 */
  }
  
  .detail-preview {
    max-width: 40%; /* 保持6:4比例 */
  }
}

/* 补充一些全局样式覆盖，确保表头宽度一致 */
:deep(.el-descriptions__label) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  color: #333;
  background-color: #f5f7fa;
  padding: 8px 12px !important;
}

:deep(.el-descriptions__content) {
  width: calc(100% - 100px);
  padding: 12px 15px;
}

/* 用于长文本展开/收起的样式 */
.text-ellipsis-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.text-collapsed {
  position: relative;
  overflow: hidden;
  max-height: 120px;
  width: 100%;
  box-sizing: border-box;
}

.toggle-expand {
  color: #409EFF;
  cursor: pointer;
  display: block;
  text-align: right;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 13px;
  background: #fff;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.toggle-expand:hover {
  text-decoration: underline;
  background: #f5f7fa;
}

/* 调整预览内容区域 */
.preview-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
}

/* 调整预览卡片样式 */
.detail-preview :deep(.el-card) {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.detail-preview :deep(.el-card__body) {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 优化滚动条样式 */
.detail-preview::-webkit-scrollbar {
  width: 6px;
}

.detail-preview::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-preview::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.detail-preview::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.card-header .header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.card-header .el-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
}

.card-header .el-button .el-icon {
  font-size: 16px;
}

/* 移除旧的搜索框样式 */
.search-box {
  display: none;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}

.file-list-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.file-items {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 12px; /* 增加左右内边距 */
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;
}

.file-item:last-child {
  border-bottom: none;
}

.file-item:hover {
  background-color: #f5f7fa;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 70%; /* 设置最大宽度为容器的70% */
  overflow: hidden;
}

.file-name {
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

.file-actions .el-button {
  padding: 6px 12px;
}

.file-actions .el-button .el-icon {
  margin-right: 4px;
}

.action-button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 32px !important;
  min-height: 32px !important;
}

.action-button .el-icon {
  font-size: 16px;
  color: #ffffff;
  transition: all 0.3s ease;
  margin: 0 !important;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-right: 15px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(10px);
}

.file-actions .el-button {
  padding: 0 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* 移除所有可能影响按钮形状的样式 */
.download-button,
.preview-button {
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

/* 确保按钮在hover和active状态下保持圆形 */
.download-button:hover,
.preview-button:hover,
.download-button:active,
.preview-button:active {
  border-radius: 50% !important;
  transform: translateY(-2px);
}

/* 移除按钮内部的padding */
.el-button--circle {
  padding: 0 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.action-button:hover::before {
  transform: scale(1);
}

.download-button {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.2);
}

.download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.preview-button {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
}

.preview-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.action-button .el-icon {
  font-size: 16px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.action-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 添加按钮点击波纹效果 */
.action-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.action-button:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

/* 优化工具提示样式 */
:deep(.el-tooltip__trigger) {
  display: inline-flex;
}

:deep(.el-tooltip__popper) {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 添加上传按钮特殊样式 */
.upload-status-btn {
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4) !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  border-radius: 8px !important;
  margin-right: 20px !important;
  min-width: 120px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.upload-status-btn:hover {
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.5) !important;
}

.upload-status-btn:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4) !important;
}

.upload-status-btn .el-icon {
  margin-right: 8px !important;
  font-size: 18px !important;
  vertical-align: middle !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.upload-status-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upload-status-btn:hover::before {
  opacity: 1;
}

.upload-status-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: rotate(45deg);
}

.upload-status-btn:hover::after {
  opacity: 1;
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

/* 调整分隔线样式 */
.status-buttons .el-divider--vertical {
  margin: 0 24px;
  height: 1.5em;
  background-color: #dcdfe6;
  opacity: 0.6;
}

/* 调整其他按钮样式以形成对比 */
.status-buttons .el-button:not(.upload-status-btn) {
  padding: 10px 20px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.status-buttons .el-button:not(.upload-status-btn):hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* 添加上传按钮的呼吸灯效果 */
@keyframes glow {
  0% {
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 152, 0, 0.6);
  }
  100% {
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  }
}

.upload-status-btn {
  animation: glow 2s infinite;
}

/* 确保上传按钮在移动端也保持突出 */
@media (max-width: 768px) {
  .upload-status-btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
    min-width: 100px !important;
  }
  
  .upload-status-btn .el-icon {
    font-size: 16px !important;
  }
}

/* 添加上传按钮样式 */
.upload-button {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%) !important;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.upload-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3) !important;
}

.upload-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2) !important;
}

.upload-button .el-icon {
  font-size: 16px;
  color: #ffffff;
  margin: 0 !important;
}

.upload-button.is-disabled {
  background: #a0cfff !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.upload-button.is-disabled .el-icon {
  color: #ffffff !important;
}

/* 添加删除按钮样式 */
.delete-button {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%) !important;
  box-shadow: 0 2px 6px rgba(245, 108, 108, 0.2) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important; /* 添加居中对齐 */
}

.delete-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3) !important;
}

.delete-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.2) !important;
}

.delete-button .el-icon {
  font-size: 16px;
  color: #ffffff;
  margin: 0 !important;
}

/* 调整文件操作按钮容器样式 */
.file-actions {
  display: flex;
  gap: 8px;
  margin-right: 15px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(10px);
  align-items: center; /* 添加垂直居中对齐 */
  justify-content: center; /* 添加水平居中对齐 */
  min-width: 80px; /* 确保有足够的空间容纳按钮 */
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.upload-all-button {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%) !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.2) !important;
}

.upload-all-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3) !important;
}

.upload-all-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.2) !important;
}

.upload-all-button .el-icon {
  font-size: 16px !important;
  margin-right: 4px !important;
}

.upload-all-button.is-disabled {
  background: #a0cfff !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.file-status {
  margin-left: 10px;
  min-width: 80px;
  text-align: center;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;
}

.file-item:hover {
  background-color: #f5f7fa;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin: 0 10px;
}

/* 调整文件列表容器样式 */
.file-items {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

/* 确保文件项内容不会换行 */
.file-item > * {
  flex-shrink: 0;
}

/* 调整文件名区域，允许在必要时缩小 */
.file-info {
  flex: 1;
  min-width: 0;
  max-width: 40%;
  margin-right: 10px;
}

/* 确保操作按钮区域不会被压缩 */
.file-actions {
  flex-shrink: 0;
  margin: 0 10px;
}

/* 调整状态标签样式 */
.file-status {
  flex-shrink: 0;
  margin-left: 10px;
  min-width: 60px; /* 减小最小宽度 */
  max-width: none; /* 移除最大宽度限制 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  padding: 0 8px;
  display: inline-flex; /* 使用 inline-flex 布局 */
  align-items: center;
  justify-content: center;
  height: 24px; /* 固定高度 */
}

/* 调整 el-tag 内部样式 */
.file-status :deep(.el-tag__content) {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

/* 调整文件项布局 */
.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;
  position: relative;
  min-height: 60px;
  flex-wrap: nowrap;
  gap: 8px; /* 添加间距 */
}

.file-info {
  flex: 1;
  min-width: 0;
  max-width: 45%; /* 稍微增加文件名区域的最大宽度 */
  margin-right: 8px;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin: 0 8px;
  flex-shrink: 0;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .file-info {
    max-width: 40%;
  }
}

@media (max-width: 768px) {
  .file-info {
    max-width: 35%;
  }
  
  .file-status {
    min-width: 50px;
    font-size: 11px;
    padding: 0 6px;
  }
}

/* 添加上传提示样式 */
.upload-tip {
  font-size: 13px;
  color: #909399;
  margin-top: 8px;
  padding: 4px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: inline-block;
}

.upload-tip::before {
  content: '📝';
  margin-right: 6px;
}

/* 确保提示文本在移动端也能正常显示 */
@media (max-width: 768px) {
  .upload-tip {
    font-size: 12px;
    padding: 3px 8px;
  }
}

.mark-button {
  background: linear-gradient(135deg, #ff9800 0%, #ffe066 100%) !important;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mark-button .el-icon {
  font-size: 16px;
  color: #fff8e1;
  margin: 0 !important;
}

.mark-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
}
</style>
